<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>练习5：DOM操作</title>  
    <style type="text/css">  
        html, div, ul, li {margin: 0px; padding: 0px;}  
        a {cursor: pointer;}  
        li {list-style: none; cursor: pointer;}  
        fieldset {border: #000 1px dashed; width: 225px; height: 225px; padding: 10px; text-align: center; float: left; margin-left: 5px;}  
        #cont_left {width: 300px; height: 500px; float: left;}  
        #cont_right {float: left;}  
        .newcss1 {background-color: yellowgreen;}  
        .red-border {border: 1px solid red;}  
        .green-bg {background-color: green;}  
    </style>  
    <script>  
        // 初始化时隐藏所有菜单  
        window.onload = function() {  
            var menus = document.querySelectorAll('#cont_left ul ul');  
            menus.forEach(function(menu) {  
                menu.style.display = 'none';  
            });  
        };  
  
        // 菜单收缩与扩展，同时控制其他菜单的关闭  
        function show(title) {  
            var menus = document.querySelectorAll('#cont_left ul ul');  
            menus.forEach(function(menu) {  
                menu.style.display = 'none';  
            });  
            var currentMenu = document.getElementById(title);  
            currentMenu.style.display = 'block';  
        }  
  
        // 获取原始图片路径  
        function showImg() {  
            var img = document.getElementById('fruit');  
            var msg1 = document.getElementById('msg1');  
            msg1.innerText = img.src;  
        }  
  
        // 获取我喜欢的水果  
        function getFruit() {  
            var checkboxes = document.querySelectorAll('input[name="enjoy"]');  
            var selectedFruits = [];  
            checkboxes.forEach(function(checkbox) {  
                if (checkbox.checked) {  
                    selectedFruits.push(checkbox.value);  
                }  
            });  
            var msg2 = document.getElementById('msg2');  
            msg2.innerText = '我喜欢的水果有: ' + selectedFruits.join(', ');  
        }  
  
        // 创建新的图片，并显示  
        function createImg() {  
            var newImg = document.createElement('img');  
            newImg.src = 'images\liulian.jpg'; // 替换为新的图片路径  
            var msg3 = document.getElementById('msg3');  
            msg3.innerHTML = ''; // 清空之前的内容  
            msg3.appendChild(newImg);  
        }  
  
        // 克隆原始图片，并放入相应标签中  
        function cloneImg() {  
            var originalImg = document.getElementById('fruit');  
            var clonedImg = originalImg.cloneNode(true); // 深度克隆  
            var msg4 = document.getElementById('msg4');  
            msg4.innerHTML = ''; // 清空之前的内容  
            msg4.appendChild(clonedImg);  
        }  
  
        // 将原始图片换成其它图片并显示  
        function changeImg() {  
            var img = document.getElementById('fruit');  
            img.src = 'images\liulian.jpg'; // 替换新的图片路径  
        }  
  
        // 删除原始图片  
        function removeImg() {  
            var img = document.getElementById('fruit');  
            img.parentNode.removeChild(img);  
        }  
  
        // 为原始图片加上行间样式，加个红色边框  
        function changeCss1() {  
            var img = document.getElementById('fruit');  
            img.classList.add('red-border');  
        }  
  
        // 为所有的 fieldset 标签加个内部样式，加绿色背景色  
        function changeCss2() {  
            var fieldsets = document.querySelectorAll('fieldset');  
            fieldsets.forEach(function(fieldset) {  
                fieldset.classList.add('green-bg');  
            });  
        }  
    </script>  
</head>  
<body>  
    <div id="cont_left">  
        <ul>  
            <img src="images\fold.gif">  
            <a onclick="show('menu1')">通过DOM获取信息</a>  
            <ul id="menu1">  
                <li onclick="showImg()"><img src="images\doc.gif">获取原始图片路径</li>  
                <li onclick="getFruit()"><img src="images\doc.gif">获取我喜欢的水果</li>  
            </ul>  
        </ul>  
        <ul>  
            <img src="images\fold.gif">  
            <a onclick="show('menu2')">通过DOM操作元素</a>  
            <ul id="menu2">  
                <li onclick="createImg()"><img src="images\doc.gif">创建图片</li>  
                <li onclick="cloneImg()"><img src="images\doc.gif">克隆图片</li>  
                <li onclick="changeImg()"><img src="images\doc.gif">改变图片</li>  
                <li onclick="removeImg()"><img src="images\doc.gif">删除图片</li>  
            </ul>  
        </ul>  
        <ul>  
            <img src="images\fold.gif">  
            <a onclick="show('menu3')">通过DOM操作样式</a>  
            <ul id="menu3">  
                <li onclick="changeCss1()"><img src="images\doc.gif">为原始图片加上行间样式</li>  
                <li onclick="changeCss2()"><img src="images\doc.gif">为所有的fieldset加上内部样式</li>  
            </ul>  
        </ul>  
    </div>  
    <fieldset>  
        <legend>原始图片</legend>  
        <img id="fruit" src="images\fruit.jpg">  
    </fieldset>  
    <fieldset>  
        <legend>图片路径</legend>  
        <p id="msg1">在这里显示</p>  
    </fieldset>  
    <fieldset>  
        <legend>选择你喜欢的水果</legend>  
        <ul style="text-align: left;">  
            <li>  
                <input name="enjoy" type="checkbox" value="苹果" />苹果  
            </li>  
            <li>  
                <input name="enjoy" type="checkbox" value="香蕉" checked="checked" />香蕉  
            </li>  
            <li>  
                <input name="enjoy" type="checkbox" value="葡萄" />葡萄  
            </li>  
            <li>  
                <input name="enjoy" type="checkbox" value="梨" checked="checked" />梨  
            </li>  
            <li>  
                <input name="enjoy" type="checkbox" value="西瓜" />西瓜  
            </li>  
        </ul>  
        <div id="msg2" style="margin-top: 10px;text-align: left;"></div>  
    </fieldset>  
    <fieldset>  
        <legend>创建图片</legend>  
        <div id="msg3"></div>  
    </fieldset>  
    <fieldset>  
        <legend>克隆图片</legend>  
        <div id="msg4"></div>  
    </fieldset>  
</body>  
</html>